{% extends "base.html" %}

{% block title %}Research in Progress - Deep Research System{% endblock %}

{% block content %}
<div class="ldr-page active" id="research-progress">
    <div class="ldr-page-header" id="research-progress-header">
        <h1>Research in Progress</h1>
    </div>
    <div class="ldr-card" id="research-progress-card">
        <div class="ldr-card-content">
            <div class="ldr-progress-info">
                <div class="ldr-current-query-container">
                    <div class="ldr-current-query-label">Current Query:</div>
                    <div id="current-query" class="ldr-current-query"></div>
                </div>
                <div class="ldr-progress-container">
                    <div class="ldr-progress-bar">
                        <div id="progress-bar" class="ldr-progress-fill"></div>
                    </div>
                    <div id="progress-percentage" class="ldr-progress-percentage">0%</div>
                </div>
                <div class="ldr-status-container">
                    <div class="ldr-status-label">Status:</div>
                    <div id="status-text" class="ldr-status-indicator">Initializing</div>
                </div>
                <div class="ldr-task-container">
                    <div class="ldr-task-label">Current Task:</div>
                    <div id="current-task" class="ldr-task-text">Starting research...</div>
                </div>
                <div class="ldr-progress-actions">
                    <button id="cancel-research-btn" class="btn ldr-btn-outline ldr-terminate-btn">
                        <i class="fas fa-stop-circle"></i> Cancel Research
                    </button>
                    <a id="view-results-btn" class="btn btn-primary" style="display: none;">
                        <i class="fas fa-eye"></i> View Results
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% include "components/log_panel.html" %}
</div>
{% endblock %}

{% block page_scripts %}
<!-- Load required services -->
<script src="/static/js/services/audio.js"></script>
<script src="/static/js/services/ui.js"></script>
<script src="/static/js/services/formatting.js"></script>
<script src="/static/js/services/api.js"></script>
<script src="/static/js/services/socket.js"></script>

<!-- Then load the component -->
<script src="/static/js/components/progress.js"></script>
{% endblock %}
